/*
 * @Author: Dufen~123 dufen.0
 * @Date: 2024-11-28 13:46:40
 * @LastEditors: Dufen~123 dufen.0
 * @LastEditTime: 2024-11-28 18:07:52
 * @FilePath: \my-project\src\components\commonSider\commonSider.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * import
 */
import React, { useState } from 'react';
// import {
//   MenuFoldOutlined,
//   MenuUnfoldOutlined,
//   UploadOutlined,
//   UserOutlined,
//   VideoCameraOutlined,
// } from '@ant-design/icons';
import {  Layout, Menu, theme } from 'antd';
import './commonSider.css'
import items from './items'

const { Sider } = Layout;

const CommonSider = ({collapsed}) => {
  // 接受父组件的参数
  const siderStyle = {
    width:'25px',
   heigth: 'calc(100vh - 2px)',
    color: '#fff',
    // backgroundColor: '#1677ff',
  };
  // const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken(); // 获取主题颜色

  return (
    <>
      <Sider trigger={null} collapsible collapsed={collapsed}  style={siderStyle}>
        <div className="demo-logo-vertical"> </div> 
        <div className='demo-logo'>
          <p className='demo-logo'>   通用后台管理系统</p>
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
      </Sider>
     
    </>
  );
};

export default CommonSider;